<template>
  <div class="bottom">
    <div class="star" @click="toggleStar">
      <div class="iconfont icon-star" v-if="stared" @click="starClick">&#xe60d;</div>
      <div class="iconfont icon-star" v-else @click="starClick">&#xe61b;</div>
    </div>
    <div class="comment">
      <div class="input">
        <input type="text" class="input-box" placeholder="说点儿什么吧" v-model="text" @click="inputClick"/>
      </div>
      <button class="btn" @click="handleBtnClick">提交</button>
    </div>
  </div>
</template>
<script>
import { animateCSS } from 'common/animate.js'
export default {
  name: 'Bottom',
  props: {
    stared: Number
  },
  data () {
    return {
      text: ''
    }
  },
  methods: {
    handleBtnClick (e) {
      animateCSS(e.target, 'jello')
      if (!this.$store.state.userStatus) {
        this.$emit('userbox')
        return
      }
      if (!this.text) return
      this.$emit('newComment', this.text)
      this.text = ''
    },
    toggleStar () {
      if (!this.$store.state.userStatus) {
        this.$emit('userbox')
        return
      }
      this.$emit('star')
    },
    inputClick (e) {
      animateCSS(e.target, 'headShake')
    },
    starClick (e) {
      animateCSS(e.target, 'swing')
    }
  }
}
</script>
<style lang="stylus" scoped>
  .bottom
    position: fixed
    z-index: 2500
    bottom: 0
    left: 0
    width: 100%
    height: .5rem
    background: #D4CDC9
    display: flex
    overflow: hidden
    .star
      width: .6rem
      height: 100%
      box-sizing: border-box
      padding: .07rem 0
      .icon-star
        font-size: .36rem
        margin: 0 auto
        text-align:center
    .comment
      flex: 1
      height: 100%
      display: flex
      .btn
        width: .7rem
        display: inline-block
        background: #FE4C40
        color: #ffffff
        font-size: .2rem
      .input
        overflow: hidden
        display: block
        overflow:hidden
        flex: 1
        height: 100%
        box-sizing: border-box
        padding: .07rem .1rem .07rem 0
        .input-box
          font-size: .16rem
          height 100%
          width: 100%
          display: block
          border-radius: .2rem
          box-sizing: border-box
          padding-left: .1rem
          text-overflow: hidden
</style>
